<template>
	<view class="">
		<swiper class="swiper" circular>
			<swiper-item v-if="chartData.series">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</swiper-item>
			<swiper-item v-if="chartData1.series">
				<view class="chartstitle">
					电费分润
				</view>
				<view class="swiperitem">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData1" />
				</view>
			</swiper-item>
			<swiper-item v-if="chartData2.series">
				<view class="chartstitle">
					服务费分润
				</view>
				<view class="swiperitem">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData2" />
				</view>
			</swiper-item>	
			<swiper-item v-if="chartData3.series">
				<view class="chartstitle">
					卡分润
				</view>
				<view class="swiperitem">
					<qiun-data-charts type="pie" :opts="opts" :chartData="chartData3" />
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				typeof: Object,
				default: () => []
			}
		},
		data() {
			return {
				//您可以通过修改 config-ucharts.js 文件中下标为 ['pie'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {

					color: ["#2ec7c9",
						"#b6a2de",
						"#5ab1ef",
						"#ffb980",
						"#d87a80",
						"#8d98b3",
						"#e5cf0d",
						"#97b552",
						"#95706d",
						"#dc69aa",
						"#07a2a4",
						"#9a7fd1",
						"#588dd5",
						"#f5994e",
						"#c05050",
						"#59678c",
						"#c9ab00",
						"#7eb00a",
						"#6f5553",
						"#c14089"
					]
				}
			}
		},
		computed: {
			chartData() {
				let data = this.list.filter(e => {
					return e.mode == "0"
				});
				if (data.length == 0) {
					return {}
				}
				let r = data.map(e => {
					return {
						"name": e.mc,
						"value": Number(e.per),
						"labelText": e.mc,
						"tooltipFormat": "41848",
						properties: {
							name: `${e.mc}(${Number(e.per)}%)`
						}
					}
				});
				return {
					series: [{
						data: r
					}]
				}
			},
			chartData1() {
				let data = this.list.filter(e => {
					return e.mode == "1"
				});
				if (data.length == 0) {
					return {}
				}
				let r = data.map(e => {
					return {
						"name": e.mc,
						"value": Number(e.per),
						"labelText": e.mc,
						"tooltipFormat": "41848",
						properties: {
							name: `${e.mc}(${Number(e.per)}%)`
						}
					}
				});
				return {
					series: [{
						data: r
					}]
				}
			},
			chartData2() {
				let data = this.list.filter(e => {
					return e.mode == "2"
				});
				if (data.length == 0) {
					return {}
				}
				let r = data.map(e => {
					return {
						"name": e.mc,
						"value": Number(e.per),
						"labelText": e.mc,
						"tooltipFormat": "41848",
						properties: {
							name: `${e.mc}(${Number(e.per)}%)`
						}
					}
				});
				return {
					series: [{
						data: r
					}]
				}
			},
			chartData3() {
				let data = this.list.filter(e => {
					return e.mode == "3"
				});
				if (data.length == 0) {
					return {}
				}
				let r = data.map(e => {
					return {
						"name": e.mc,
						"value": Number(e.per),
						"labelText": e.mc,
						"tooltipFormat": "41848",
						properties: {
							name: `${e.mc}(${Number(e.per)}%)`
						}
					}
				});
				return {
					series: [{
						data: r
					}]
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.chartstitle {
		text-align: center;
		line-height: 60rpx;
		font-weight: bold;
		font-size: 34rpx;
	}

	.swiper {
		height: 460rpx;

		.swiperitem {
			height: 400rpx;
		}
	}
</style>
